<template>
  <button
    class="container"
    :class="[`type-${type}`, `size-${size}`, `iconfont ${icon}`]"
    :style="{ width: width }"
    @click="onClickListener"
  >
    <slot></slot>
  </button>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: "default",
    },
    size: {
      type: String,
      default: "default",
    },
    width: {
      default: "",
    },
    icon: {
      type: String,
      default: "icon-juxiezuo",
    },
  },
  data() {
    return {};
  },
  methods: {
    onClickListener() {
      this.$emit("click");
    },
  },
};
</script>

<style>
.container {
  display: inline-block;
  padding: 5px 10px;
  color: #fff;
  margin-right: 5px;
  border: 0px;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
}
.type-default {
  background: #409eff;
}
.type-danger {
  background: #f56c6c;
}
.type-success {
  background: #67c23a;
}
.type-warning {
  background: #e6a23c;
}
.type-info {
  background: #909399;
}
.size-default {
  padding: 5px 10px;
  font-size: 14px;
}
.size-small {
  padding: 3px 6px;
  font-size: 10px;
}
.size-big {
  padding: 8px 16px;
  font-size: 18px;
}
</style>